4-5 代码提交msg校验整合（commitizen&commitlint）
为什么需要规范 Git Commit Message
在团队协作中，统一的 commit message 规范有三大好处：
- 可读性——从 Git 日志中一眼看出每次提交的类型和内容
- 自动化——配合工具自动生成 CHANGELOG、自动判断版本号
- 可追溯——方便回溯特定类型的变更（如 bug 修复、新功能）
最广泛使用的是 Conventional Commits 规范：
<type>(<scope>): <subject>
<body>
<footer>
text
commitizen：交互式提交工具
commitizen 替代 git commit 命令，通过交互式问答引导开发者填写符合规范的 commit message。
安装
# 全局安装
npm install -g commitizen
# 项目内安装 cz-conventional-changelog
commitizen init cz-conventional-changelog --save --save-exact
bash
使用
# 不再使用 git commit，改用 git cz
git cz
# 或
git add .
cz
bash
交互式问答流程：
? Select the type of change that you're committing: (Use arrow keys)
❯ feat: A new feature
fix: A bug fix
docs: Documentation only changes
style: Changes that do not affect the meaning of the code
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing tests or correcting existing tests
chore: Changes to the build process or auxiliary tools
? What is the scope of this change (e.g. component or file name): (press enter to skip)
login
? Write a short, imperative tense description of the change:
添加登录页面的表单验证
? Provide a longer description of the change: (press enter to skip)
? Are there any breaking changes? No
? Does this change affect any open issues? No
text
中文支持
# 安装中文适配器
npm install cz-customizable --save-dev
bash
// .cz-config.js（自定义中文配置）
module.exports = {
types: [
{ value: 'feat', name: '特性: 一个新特性' },
{ value: 'fix', name: '修复: 修复一个Bug' },
{ value: 'docs', name: '文档: 变更的只有文档' },
{ value: 'style', name: '格式: 空格, 分号等格式修复' },
{ value: 'refactor', name: '重构: 代码重构，不引入新功能和Bug修复' },
{ value: 'perf', name: '性能: 提升性能' },
{ value: 'test', name: '测试: 增加测试' },
{ value: 'chore', name: '工具: 开发工具变动(构建, 脚手架工具等)' },
{ value: 'revert', name: '回滚: 代码回退' },
],
};
javascript
commitlint：Commit Message 校验
commitlint 在 git commit 执行时校验 message 是否符合规范，不符合则拒绝提交。
安装
# 安装 commitlint 及 Conventional Commits 规则
npm install --save-dev @commitlint/cli @commitlint/config-conventional
# 创建配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
bash
配置规则
// commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [2, 'always', [
'feat', 'fix', 'docs', 'style', 'refactor',
'perf', 'test', 'chore', 'revert', 'build'
]],
'subject-case': [0], // 不限制 subject 大小写
'subject-max-length': [2, 'always', 100],
},
};
javascript
husky：Git Hooks 集成
husky 让 commitlint 在 git commit 时自动触发校验。
安装
# 安装 husky
npm install husky --save-dev
# 初始化 husky
npx husky init
# 添加 commit-msg hook
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg
bash
添加 pre-commit hook
# 提交前自动运行 lint
echo "npx lint-staged" > .husky/pre-commit
bash
// package.json
{
"lint-staged": {
"*.{ts,tsx}": ["eslint --fix"],
"*.{css,less}": ["stylelint --fix"]
}
}
json
完整工作流
开发者修改代码
↓
git add .
↓
git cz（交互式填写 commit message）
↓
husky 触发 commit-msg hook
↓
commitlint 校验 message 格式
↓
校验通过 → 提交成功
校验失败 → 提交被拒绝，提示修正
text
工具链一览
| 工具 | 作用 | 触发时机 |
|---|---|---|
| commitizen | 交互式引导填写 commit message | 开发者主动调用 git cz |
| commitlint | 校验 message 是否符合规范 | git commit 时自动触发 |
| husky | 管理 Git Hooks | git 操作时自动触发 |
| lint-staged | 只对暂存区文件运行 lint | git commit 前自动触发 |
这套工具链不仅适用于 React 项目，在任何需要团队协作的 Git 项目中都可以使用。
↑